<!-- 详细页面 -->
<template>
  <div class="see">
    <!-- <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    > -->
    <div>
      <el-card class="box-card row1" shadow="hover" v-loading="loading1">
        <div>
          <div class="tit">
            <div>
              <strong>{{ $t('mesProdOrderPlan.productOrderInfo') }}</strong>
              <div class="right">
                <div class="icon" :class="detail.orderStatus == 2 ? 'bksuccess' : ''"></div>
                <span :class="detail.orderStatus == 2 ? 'success' : ''">{{ orderStatusText }}</span>
              </div>
            </div>

            <div>
              <el-button icon="el-icon-arrow-left" @click="$router.push('/order/mesProdOrderPlan')">{{ $t('common.back') }}</el-button>
            </div>
          </div>

          <el-steps :active="Number(detail.orderStatus) + 1" class="step">
            <el-step :class="{ activeIcon: detail.orderStatus > 3 }">
              <p slot="icon">
                <svg t="1665222353110" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29841" width="48" height="48">
                  <path
                    d="M288.906318 800.906318L28.630356 650.689906v-297.458243l260.275962-148.729121 260.275962 148.729121v297.458243zM112.662309 602.352941L288.906318 704.232389 465.150327 602.352941V398.594045L288.906318 297.458243 112.662309 398.594045z"
                    fill="#1296db"
                    p-id="29842"
                  ></path>
                  <path d="M288.906318 500.473493m-84.031953 0a84.031954 84.031954 0 1 0 168.063907 0 84.031954 84.031954 0 1 0-168.063907 0Z" fill="#1296db" p-id="29843"></path>
                  <path
                    d="M809.458243 429.083515L623.546841 321.998548V107.084967L809.458243 0 995.369644 107.084967v214.913581zM683.782135 287.047204l125.676108 74.364561 125.676107-74.364561v-148.729121L809.458243 69.159041l-125.676108 74.364561z"
                    fill="#1296db"
                    p-id="29844"
                  ></path>
                  <path d="M809.458243 214.91358m-60.235295 0a60.235294 60.235294 0 1 0 120.470589 0 60.235294 60.235294 0 1 0-120.470589 0Z" fill="#1296db" p-id="29845"></path>
                  <path
                    d="M809.458243 1024L623.546841 916.915033V702.001452L809.458243 594.916485 995.369644 702.001452v214.913581z m-125.676108-142.036311l125.676108 74.364561 125.676107-74.364561v-148.729121l-125.676107-74.364561-125.676108 74.364561z"
                    fill="#1296db"
                    p-id="29846"
                  ></path>
                  <path d="M809.458243 809.830065m-60.235295 0a60.235294 60.235294 0 1 0 120.470589 0 60.235294 60.235294 0 1 0-120.470589 0Z" fill="#1296db" p-id="29847"></path>
                </svg>
              </p>

              <div slot="title">
                <p>{{ $t('mesProdOrderPlan.waiteSchedule') }}</p>
                <!-- <p class="date">2022-10-1 12:11:00</p> -->
              </div>
            </el-step>
            <el-step :class="{ activeIcon: detail.orderStatus > 0 }">
              <p slot="icon">
                <svg t="1665296454861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1979" width="38" height="38">
                  <path
                    d="M518.1 1023.7H149.8C71.1 1023.7 7 959 7 879.4V145.1C7 65.5 71.1 0.8 149.8 0.8h589.4c78.7 0 142.7 64.7 142.7 144.3V465c0 23.2-18.8 42-42 42s-42-18.8-42-42V145.1c0-33.3-26.4-60.3-58.7-60.3H149.8c-32.4 0-58.7 27.1-58.7 60.3v734.3c0 33.3 26.4 60.3 58.7 60.3h368.4c23.2 0 42 18.8 42 42s-18.9 42-42.1 42z"
                    fill="#1296db"
                    p-id="1980"
                  ></path>
                  <path
                    d="M640.5 205.1H246.4c-23.5 0-42.7 19.2-42.7 42.7s19.2 42.7 42.7 42.7h394.1c23.5 0 42.7-19.2 42.7-42.7s-19.2-42.7-42.7-42.7zM640.5 403.8H246.4c-23.5 0-42.7 19.2-42.7 42.7s19.2 42.7 42.7 42.7h394.1c23.5 0 42.7-19.2 42.7-42.7s-19.2-42.7-42.7-42.7zM475.5 602.4h-229c-23.5 0-42.7 19.2-42.7 42.7 0 23.5 19.2 42.7 42.7 42.7h229c23.5 0 42.7-19.2 42.7-42.7-0.1-23.5-19.3-42.7-42.7-42.7zM787.1 660c-16.5 0-29.9 13.5-29.9 29.9v92.3c0 16.5 13.5 29.9 29.9 29.9s29.9-13.5 29.9-29.9v-92.3c0.1-16.4-13.4-29.9-29.9-29.9z"
                    fill="#1296db"
                    p-id="1981"
                  ></path>
                  <path d="M864.1 752.3h-77c-16.5 0-29.9 13.5-29.9 29.9s13.5 29.9 29.9 29.9h77c16.5 0 29.9-13.5 29.9-29.9s-13.4-29.9-29.9-29.9z" fill="#1296db" p-id="1982"></path>
                  <path
                    d="M787.5 1006.7c-62.9 0-122.1-24.5-166.6-69s-69-103.7-69-166.6c0-62.9 24.5-122.1 69-166.6s103.7-69 166.6-69 122.1 24.5 166.6 69 69 103.7 69 166.6c0 62.9-24.5 122.1-69 166.6s-103.7 69-166.6 69z m0-398.2c-89.7 0-162.6 73-162.6 162.6 0 89.7 73 162.6 162.6 162.6s162.6-73 162.6-162.6c0-89.7-72.9-162.6-162.6-162.6z"
                    fill="#1296db"
                    p-id="1983"
                  ></path>
                </svg>
              </p>
              <div slot="title">
                <p>{{ $t('mesProdOrderPlan.waiteProduce') }}</p>
                <!-- <p class="date">2022-10-1 12:11:00</p> -->
              </div>
            </el-step>
            <el-step :class="{ activeIcon: detail.orderStatus > 1 }">
              <p slot="icon">
                <svg t="1665212604528" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1852" width="48" height="48">
                  <path
                    d="M293.236364 400.290909h372.363636c16.290909 0 27.927273-11.636364 27.927273-27.927273s-11.636364-27.927273-27.927273-27.927272h-372.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927272s11.636364 27.927273 27.927273 27.927273zM293.236364 500.363636h372.363636c16.290909 0 27.927273-11.636364 27.927273-27.927272s-11.636364-27.927273-27.927273-27.927273h-372.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927272zM293.236364 602.763636h186.181818c16.290909 0 27.927273-11.636364 27.927273-27.927272s-11.636364-27.927273-27.927273-27.927273h-186.181818c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927272zM409.6 646.981818h-116.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927273h116.363636c16.290909 0 27.927273-11.636364 27.927273-27.927273s-13.963636-27.927273-27.927273-27.927273z"
                    fill="#1296db"
                    p-id="1853"
                  ></path>
                  <path
                    d="M816.872727 628.363636V186.181818c0-41.890909-32.581818-74.472727-74.472727-74.472727h-69.818182c-11.636364-27.927273-37.236364-46.545455-69.818182-46.545455h-232.727272c-30.254545 0-58.181818 18.618182-69.818182 46.545455h-69.818182C188.509091 111.709091 155.927273 144.290909 155.927273 186.181818v698.181818c0 41.890909 32.581818 74.472727 74.472727 74.472728h512c37.236364 0 67.490909-27.927273 74.472727-62.836364 32.581818-34.909091 53.527273-81.454545 53.527273-134.981818-2.327273-51.2-20.945455-97.745455-53.527273-132.654546z m-146.618182 274.618182c-79.127273 0-141.963636-62.836364-141.963636-141.963636s62.836364-141.963636 141.963636-141.963637 141.963636 62.836364 141.963637 141.963637-62.836364 141.963636-141.963637 141.963636zM351.418182 139.636364c0-9.309091 9.309091-18.618182 18.618182-18.618182h232.727272c9.309091 0 18.618182 9.309091 18.618182 18.618182v23.272727c0 9.309091-9.309091 18.618182-18.618182 18.618182h-232.727272c-9.309091 0-18.618182-9.309091-18.618182-18.618182V139.636364zM230.4 902.981818c-9.309091 0-18.618182-9.309091-18.618182-18.618182V186.181818c0-9.309091 9.309091-18.618182 18.618182-18.618182h65.163636c2.327273 39.563636 34.909091 69.818182 74.472728 69.818182h232.727272c39.563636 0 72.145455-30.254545 74.472728-69.818182h65.163636c9.309091 0 18.618182 9.309091 18.618182 18.618182v400.290909a197.655273 197.655273 0 0 0-286.254546 176.872728c0 55.854545 23.272727 104.727273 60.509091 141.963636H230.4z"
                    fill="#1296db"
                    p-id="1854"
                  ></path>
                  <path
                    d="M740.072727 733.090909H698.181818v-41.890909c0-16.290909-11.636364-27.927273-27.927273-27.927273s-27.927273 11.636364-27.927272 27.927273v41.890909h-41.890909c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927273h41.890909v41.890909c0 16.290909 11.636364 27.927273 27.927272 27.927272s27.927273-11.636364 27.927273-27.927272v-41.890909h41.890909c16.290909 0 27.927273-11.636364 27.927273-27.927273s-11.636364-27.927273-27.927273-27.927273z"
                    fill="#1296db"
                    p-id="1855"
                  ></path>
                </svg>
              </p>
              <div slot="title">
                <p>{{ $t('mesProdOrderPlan.producing') }}</p>
                <!-- <p class="date">2022-10-1 12:11:00</p> -->
              </div>
            </el-step>
            <el-step>
              <p slot="icon">
                <svg t="1665222435282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1725" width="48" height="48">
                  <path
                    d="M293.236364 400.290909h372.363636c16.290909 0 27.927273-11.636364 27.927273-27.927273s-11.636364-27.927273-27.927273-27.927272h-372.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927272s11.636364 27.927273 27.927273 27.927273zM293.236364 500.363636h372.363636c16.290909 0 27.927273-11.636364 27.927273-27.927272s-11.636364-27.927273-27.927273-27.927273h-372.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927272zM293.236364 602.763636h186.181818c16.290909 0 27.927273-11.636364 27.927273-27.927272s-11.636364-27.927273-27.927273-27.927273h-186.181818c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927272zM409.6 646.981818h-116.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927273h116.363636c16.290909 0 27.927273-11.636364 27.927273-27.927273s-13.963636-27.927273-27.927273-27.927273z"
                    fill="#1296db"
                    p-id="1726"
                  ></path>
                  <path
                    d="M868.072727 761.018182c0-51.2-20.945455-97.745455-51.2-132.654546V186.181818c0-41.890909-32.581818-74.472727-74.472727-74.472727h-69.818182c-11.636364-27.927273-37.236364-46.545455-69.818182-46.545455h-232.727272c-30.254545 0-58.181818 18.618182-69.818182 46.545455h-69.818182C188.509091 111.709091 155.927273 144.290909 155.927273 186.181818v698.181818c0 41.890909 32.581818 74.472727 74.472727 74.472728h512c37.236364 0 67.490909-27.927273 74.472727-62.836364 30.254545-34.909091 51.2-83.781818 51.2-134.981818z m-337.454545 0c0-79.127273 62.836364-141.963636 141.963636-141.963637s141.963636 62.836364 141.963637 141.963637-62.836364 141.963636-141.963637 141.963636-141.963636-62.836364-141.963636-141.963636zM351.418182 139.636364c0-9.309091 9.309091-18.618182 18.618182-18.618182h232.727272c9.309091 0 18.618182 9.309091 18.618182 18.618182v23.272727c0 9.309091-9.309091 18.618182-18.618182 18.618182h-232.727272c-9.309091 0-18.618182-9.309091-18.618182-18.618182V139.636364zM230.4 902.981818c-9.309091 0-18.618182-9.309091-18.618182-18.618182V186.181818c0-9.309091 9.309091-18.618182 18.618182-18.618182h65.163636c2.327273 39.563636 34.909091 69.818182 74.472728 69.818182h232.727272c39.563636 0 72.145455-30.254545 74.472728-69.818182h65.163636c9.309091 0 18.618182 9.309091 18.618182 18.618182v400.290909a197.655273 197.655273 0 0 0-286.254546 176.872728c0 55.854545 23.272727 104.727273 60.509091 141.963636H230.4z"
                    fill="#1296db"
                    p-id="1727"
                  ></path>
                  <path
                    d="M716.8 695.854545l-69.818182 69.818182-25.6-25.6c-11.636364-11.636364-27.927273-11.636364-39.563636 0s-11.636364 27.927273 0 39.563637l44.218182 44.218181c4.654545 4.654545 11.636364 9.309091 18.618181 9.309091s13.963636-2.327273 18.618182-9.309091l90.763637-90.763636c11.636364-11.636364 11.636364-27.927273 0-39.563636-9.309091-9.309091-25.6-9.309091-37.236364 2.327272z"
                    fill="#1296db"
                    p-id="1728"
                  ></path>
                </svg>
              </p>

              <div slot="title">
                <p>{{ $t('mesProdOrderPlan.completed') }}</p>
                <!-- <p class="date">2022-10-1 12:11:00</p> -->
              </div>
            </el-step>
          </el-steps>
          <div class="drawer-line"></div>
          <el-descriptions class="margin-top" title="" :column="3" size="medium" :colon="false">
            <el-descriptions-item :label="`${$t('mesSalesOrder.planCode')}：`"
              ><span class="fong-w">{{ detail.planCode }}</span></el-descriptions-item
            >
            <!-- <el-descriptions-item :label="`${$t('mesSalesOrder.planDeliveryDate')}：`"
              ><span class="fong-w">{{ detail.deliveryDate }}</span></el-descriptions-item
            >
            <el-descriptions-item :label="`${$t('mesProdOrderPlan.customer')}：`">{{
              detail.customerName
            }}</el-descriptions-item> -->
            <!-- <el-descriptions-item label="生产工厂:1">
                {{ detail.bing }}
              </el-descriptions-item> -->
            <el-descriptions-item :label="`${$t('mesProdOrderPlan.actualBeginDate')}：`">
              <span v-if="detail.actualBeginDate">
                {{ `${detail.actualBeginDate} ~ ${detail.actualEndDate || $t('mesProdOrderPlan.tillNow')} ` }}
              </span>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="1">
                <el-tag size="small">{{ detail.bing }}</el-tag>
              </el-descriptions-item> -->
          </el-descriptions>

          <div class="drawer-line"></div>
          <el-descriptions class="margin-top" title="" :column="3" size="medium" :colon="false">
            <el-descriptions-item :label="`${$t('mesGateOrderWhite.prodName')}：`"
              ><span class="fong-w">{{ detail.prodName }}</span></el-descriptions-item
            >
            <el-descriptions-item :label="`${$t('mesGateOrderWhite.prodCode')}：`"
              ><span class="fong-w">{{ detail.prodCode }}</span></el-descriptions-item
            >
            <!-- <el-descriptions-item label="产品规格：1">{{
                detail.bing
              }}</el-descriptions-item> -->

            <el-descriptions-item :label="`${$t('mesProdOrderPlan.planProduct')}：`">
              <p>
                <span class="count">{{ detail.quantity }}</span>
                <!-- <span class="">件</span> -->
              </p>
            </el-descriptions-item>
            <el-descriptions-item :label="`${$t('mesProdOrderPlan.qualified')}：`">
              <p>
                <span class="count">{{ detail.qualifiedQty }}</span>
                <!-- <span class="">件</span> -->
              </p>
            </el-descriptions-item>
            <el-descriptions-item :label="`${$t('mesProdOrderPlan.waitePro')}：`"
              ><p>
                <span class="count">{{ detail.waitQuantity }}</span>
                <!-- <span class="">件</span> -->
              </p>
            </el-descriptions-item>
            <el-descriptions-item :label="`${$t('mesProdOrderPlan.unqualified')}：`">
              <p>
                <span class="count">{{ detail.unqualifiedQty }}</span>
                <!-- <span class="">件</span> -->
              </p>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="产品描述：1"
                >{{ detail.key13 }}
              </el-descriptions-item> -->
          </el-descriptions>
        </div>
      </el-card>

      <br v-if="false" />
      <el-card class="row2" v-loading="loading1" v-if="false">
        <div>
          <div class="tit">
            <div class="drawer-card-title__mark"></div>
            <span class="drawer-card-title__text ml8">{{ $i18n.t("mesProdOrderPlan.procedure") }}</span>
          </div>
          <div class="centent flex-ac">
            <div class="process_chunk flex-ac flex-col" :key="i" v-for="(ite, i) in radiusList">
              <div :class="i == 0 ? '' : 'raduis_line'"></div>
              <div class="raduis strong font-16 flex-ac content-center" :class="Number(ite.ratio) == 0 ? 'rihg-0' : Number(ite.ratio) == 100 ? 'rihg-100' : 'rihg-10'">
                <p>{{ ite.ratio || 0 }}%</p>
              </div>
              <div class="font-14 color-333 mt8 cursor-pointer el-tooltip__trigger el-tooltip__trigger">
                {{ ite.processName }}
              </div>
              <div
                class="font-14 color-333 mt8 cursor-pointer el-tooltip__trigger el-tooltip__trigger"
              >
               {{ $i18n.t('mesProdOrderPlan.totalCount') }}： {{ ite.total }}
              </div>
              <div
                class="font-14 color-333 mt8 cursor-pointer el-tooltip__trigger el-tooltip__trigger"
              >
               {{ $i18n.t('mesProdOrderPlan.qualifiedQty') }}：{{ ite.sumQualifiedQty }}
              </div>
              <div
                class="font-14 color-333 mt8 cursor-pointer el-tooltip__trigger el-tooltip__trigger"
              >
               {{ $i18n.t('mesProdOrderPlan.unqualifiedQty') }}： {{ ite.sumUnqualifiedQty }}
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <br />
      <!--<el-card class="row1 row2">-->
      <!--  <div>-->
      <!--    <div class="tit">-->
      <!--      <div class="drawer-card-title__mark"></div>-->
      <!--      <span class="drawer-card-title__text ml8">领料信息</span>-->
      <!--    </div>-->
      <!--    <div class="center">-->
      <!--      <el-descriptions-->
      <!--        class="margin-top"-->
      <!--        title=""-->
      <!--        :column="3"-->
      <!--        size="medium"-->
      <!--        :colon="false"-->
      <!--      >-->
      <!--        <el-descriptions-item label="领料状态："-->
      <!--          ><span class="fong-w">{{-->
      <!--            detail.key1-->
      <!--          }}</span></el-descriptions-item-->
      <!--        >-->
      <!--        <el-descriptions-item label="应领料："-->
      <!--          ><span class="fong-w">{{-->
      <!--            detail.key2-->
      <!--          }}</span></el-descriptions-item-->
      <!--        >-->
      <!--        <el-descriptions-item label="实际领料：">{{-->
      <!--          detail.key3-->
      <!--        }}</el-descriptions-item>-->
      <!--        <el-descriptions-item label="未领料：">-->
      <!--          <p>-->
      <!--            <span class="count"> {{ detail.key3 }}</span>-->
      <!--            &lt;!&ndash; <span>套</span> &ndash;&gt;-->
      <!--          </p>-->
      <!--        </el-descriptions-item>-->
      <!--        <el-descriptions-item label="领料齐套率：">{{-->
      <!--          detail.key3-->
      <!--        }}</el-descriptions-item>-->
      <!--      </el-descriptions>-->
      <!--    </div>-->
      <!--  </div>-->
      <!--</el-card>-->
      <el-card class="row1 row2" v-loading="loadingtable">
        <div>
          <div class="tit">
            <div class="drawer-card-title__mark"></div>
            <span class="drawer-card-title__text ml8">{{ $t('mesProdOrderPlan.materialReq') }}</span>
          </div>
          <div class="center">
            <el-table :data="tableDataMaterial" border style="width: 100%;">
              <el-table-column type="index" width="60" :label="$i18n.t('common.order')" fixed="left"></el-table-column>

              <el-table-column prop="orderNo" :label="$t('mesProdOrderPlan.orderNo')" width="150" fixed="left" :showOverflowTooltip="true" />
              <!-- <el-table-column
                prop="waveOrderNo"
                :label="$t('mesProdOrderPlan.waveOrderNo')"
                width="150"
                :showOverflowTooltip="true"
              /> -->
              <el-table-column prop="printCode" :label="$t('mesProdOrderPlan.barcode')" min-width="350" :showOverflowTooltip="true" />
              <el-table-column prop="materialCode" :label="$t('mesGateProdWhite.goodsCode')" min-width="200" :showOverflowTooltip="true" />
              <el-table-column prop="materialName" :label="$t('mesGateProdWhite.goodsName')" min-width="200" :showOverflowTooltip="true" />
              <el-table-column prop="planQty" :label="$t('mesGateOrderWhite.planQuantity')" width="120" />
              <el-table-column prop="amount" :label="$t('mesGateOrderWhite.actualQuantity')" width="120" />
              <el-table-column prop="unit" :label="$t('mesGateOrderWhite.measureUnit')" width="120" />
              <el-table-column prop="unitCode" :label="$t('mesGateOrderWhite.measureUnitCode')" width="140" />
              <el-table-column prop="batchNo" :label="$t('mesProdOrderPlan.BatchNumber')" width="180" :showOverflowTooltip="true" />
              <el-table-column prop="createTime" :label="$t('common.createTime')" width="160" :showOverflowTooltip="true" />
            </el-table>
          </div>
        </div>
      </el-card>
      <br />
      <el-card class="row1 row2" v-loading="loadingtable">
        <div>
          <div class="tit">
            <div class="drawer-card-title__mark"></div>
            <span class="drawer-card-title__text ml8">{{ $t('mesProdOrderPlan.productWorkOrderList') }}</span>
          </div>
          <div class="center">
            <el-table :data="tableData" border style="width: 100%;" :default-sort="{ prop: 'orderCode', order: 'ascending' }">
              <el-table-column type="index" width="60" :label="$i18n.t('common.order')" fixed="left"></el-table-column>
              <el-table-column fixed="left" prop="orderCode" :label="$t('mesProdOrderPlan.workOrderCode')" min-width="220" sortable>
                <template slot-scope="scope">
                  <el-link @click="goUrl(scope.row)" type="primary">
                    {{ scope.row.orderCode }}
                  </el-link>
                </template>
              </el-table-column>

              <el-table-column prop="prodCode" :label="$t('mesGateProdWhite.goodsCode')" width="180" />
              <el-table-column prop="prodName" :label="$t('mesGateProdWhite.goodsName')" width="180" :showOverflowTooltip="true" />
              <el-table-column prop="quantity" :label="$t('mesProdOrderPlan.planQty')" width="160" />
              <el-table-column prop="actualQuantity" :label="$t('mesProdOrderPlan.actQty')" width="160" />
              <el-table-column prop="qualifiedQty" :label="$t('mesSalesOrder.qualifiedQty')" width="160" />
              <el-table-column prop="unqualifiedQty" :label="$t('mesSalesOrder.unqualifiedQty')" width="160" />
              <el-table-column prop="unit" :label="$t('mesGateOrderWhite.measureUnit')" width="120" />
              <el-table-column prop="unitCode" :label="$t('mesGateOrderWhite.measureUnitCode')" width="140" />
              <el-table-column prop="actualBeginDate" :label="$t('mesProdOrderPlan.actualBeginDate')" width="140" />
              <el-table-column prop="actualEndDate" :label="$t('mesProdOrderPlan.actualEndDate')" width="130" />
              <el-table-column prop="lineCode" :label="$t('mesGate.lineCode')"  />
              <el-table-column prop="lineName" :label="$t('mesGate.lineName')" :showOverflowTooltip="true" />
              <!-- <el-table-column
                prop="stationName"
                :label="$t('mesTeam.workCellName')"
                width="180"
                :showOverflowTooltip="true"
              />
              <el-table-column
                prop="equipmentName"
                :label="$t('mesProdOrderPlan.equipmentName')"
                width="180"
                :showOverflowTooltip="true"
              /> -->
            </el-table>
          </div>
        </div>
      </el-card>
    </div>
    <!-- </el-dialog> -->
    <!-- <workSee ref="workSee" /> -->
  </div>
</template>

<script>
//例如：import 《组件名称》 from '《组件路径》';
import { getListByPlanCode, getWholeProcess, getMaterialListByPlanCode } from '@/api/order/mesProdOrderPlan'

import workSee from './workSee.vue'
export default {
  name: '',
  //import引入的组件需要注入到对象中才能使用
  components: { workSee },
  data() {
    //这里存放数据
    return {
      dialogVisible: false,
      loading1: false,
      loadingtable: false,
      orderStatusList: [
        {
          type: -1,
          name: $i18n.t('mesProdOrderPlan.waiteSchedule')
        },
        {
          type: 0,
          name: $i18n.t('mesProdOrderPlan.waiteProduce')
        },
        {
          type: 1,
          name: $i18n.t('mesProdOrderPlan.producing')
        },
        {
          type: 2,
          name: $i18n.t('mesProdOrderPlan.completed')
        },
        {
          type: 3,
          name: $i18n.t('mesProdOrderPlan.waiteIssue')
        },
        {
          type: 4,
          name: $i18n.t('mesProdOrderPlan.issued')
        }
      ],

      detail: {
        orderStatus: 0
      },
      radiusList: [],
      tableData: [],
      tableDataMaterial: []
    }
  },
  //监听属性 类似于data概念
  computed: {
    orderStatusText() {
      const status = this.orderStatusList.find((val) => val.type == this.detail.orderStatus)
      return status ? status.name : ''
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async init(planCode) {
      this.dialogVisible = true
      this.getList(planCode)
      this.getWholeProcess(planCode)
      this.getListMaterial(planCode)
    },
    handleClose() {
      this.dialogVisible = false
    },
    //详情页,下方table 订单号的跳转
    goUrl(row) {
      this.$router.push({
        path: '/order/mesProdOrderPlan/workSee',
        query: {
          id: row.orderCode
        }
      })
    },
    //列表信息
    async getList(id) {
      try {
        this.loadingtable = true
        let res = await getListByPlanCode(id)

        this.tableData = res.data.result
      } finally {
        this.loadingtable = false
      }
    },
    async getListMaterial(id) {
      try {
        this.loadingtable = true
        let res = await getMaterialListByPlanCode(id)

        this.tableDataMaterial = res.data.result
      } finally {
        this.loadingtable = false
      }
    },
    //字段信息
    async getWholeProcess(id) {
      try {
        this.loading1 = true
        let res = await getWholeProcess(id)
        this.detail = res.data.result

        this.radiusList = res.data.result.mesProcessList
      } finally {
        this.loading1 = false
      }
    }
  },

  mounted() {
    let { id } = this.$route.query
    if (!id) {
      this.$message.warning($i18n.t('mesProdOrderPlan.jumpWarning'))
      return
    }
    this.init(id)
  }
}
</script>
<style scoped lang="scss">
.see {
  .dispnone {
    display: none;
  }
  .box-card {
    .tit {
      padding-bottom: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      & > div {
        display: flex;
      }
      .right {
        margin-left: 10px;
        padding: 4px 8px;
        background-color: #f5f5f5;
        border-radius: 2px;
        font-size: 12px;
        color: #5a6f82;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .icon {
          width: 4px;
          height: 4px;
          background: #93b0cb;
          border-radius: 50%;
        }
        span {
          line-height: 20px;
          padding-left: 4px;
        }
        .bkred {
          background: #ff4656 !important;
        }
        .bksuccess {
          background: #00bfa5 !important;
        }
        .red {
          color: #ff4656 !important;
        }
        .success {
          color: #00bfa5 !important;
        }
      }
    }
    .drawer-line {
      height: 1px;
      margin: 20px 0px;
      background-color: #e5e5e5;
    }
    .margin-top {
      margin-top: 20px;
    }
    .fong-w {
      font-weight: 600;
    }
    /deep/.el-descriptions-item__container {
      font-size: 14px;
    }
    .step {
      width: 60%;
      /deep/.el-step__head {
        width: 80% !important;
      }
      /deep/ .el-step.is-horizontal .el-step__line {
        height: 0px;
        top: 11px;
        left: 40px;
        right: 0;
        //  border: 1px dashed #3d82ea;
        width: 100%;

        height: 1px;

        background-image: linear-gradient(to right, #3d82ea 0%, #3d82ea 50%, transparent 50%);
        background-size: 13px 1px;

        background-repeat: repeat-x;
      }
      /deep/.el-step__icon.is-text {
        border: 0px !important;
      }
      /deep/.el-step__line {
        background: white;
      }
      .activeIcon {
        /deep/ .el-step__line-inner {
          border-width: 1px !important;
          width: 100% !important;
        }
      }
    }
  }

  .row1 {
    .count {
      color: #ff4656;
      padding-right: 5px;
    }

    .date {
      font-size: 12px;
    }
  }
  .row2 {
    .tit {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
      .drawer-card-title__mark {
        width: 4px;

        height: 16px;
        background-color: #00bfa5;
      }
      .ml8 {
        color: #333;
        font-size: 16px;
        font-weight: 700;
        margin-left: 8px;
      }
    }

    .rihg-0 {
      color: rgb(155, 173, 188);
      background-color: rgb(235, 240, 245);
    }
    .rihg-10 {
      color: rgb(190, 147, 46);
      background-color: rgb(232, 219, 152);
    }
    .rihg-100 {
      color: rgb(0, 191, 165);
      background-color: rgb(194, 242, 236);
    }

    .process_chunk {
      width: 12.5%;
      position: relative;
    }
    .flex-col {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .content-start {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
    }

    .mt-24 {
      margin-top: 24px;
    }
    .raduis_line {
      width: 50%;
      border-top: 1px dashed #e5e5e5;
      position: absolute;
      left: 0;
      top: 53px;
      z-index: 1;
      -webkit-transform: translateX(-50%);
      transform: translate(-50%);
    }
    .raduis {
      width: 96px;
      height: 96px;
      z-index: 99;
      //  background: #c2f2ec;
      border: 8px solid #ffffff;
      opacity: 1;
      border-radius: 50%;
    }
    .flex-ac {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .content-center {
      justify-content: center;
    }
    .strong {
      font-weight: 700;
    }
    .cursor-pointer {
      cursor: pointer;
    }
    .color-333 {
      color: #333;
    }
    .font-14 {
      font-size: 14px;
    }
    .mt8 {
      margin-top: 8px;
    }
    .cursor-pointer {
      cursor: pointer;
    }
    *,
    *:before,
    *:after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
    }
  }
  .row3 {
  }
}
</style>
